<template>
	<div class="roomInformation">
		<roomImageEvent @add="addUser"></roomImageEvent>
		<ImageList :roomList="roomList" class="list" @change="change($event); dialogFormVisible = true" @refresh="refresh"></ImageList>
        <addRoomImage :dialogFormVisible="showAddDialog" @closeDialog="showAddDialog=false" @refresh="refresh" :addTemp="{...addTemp}" :urlTemp="urlTemp"></addRoomImage>
		<roomImageUpdate
            :dialogFormVisible="dialogFormVisible"
            @closeDialog="dialogFormVisible = false"
            :toChangeRow="toChangeRow"
            @refresh="refresh"
        ></roomImageUpdate>
	</div>
</template>

<script>
	import ImageList from "@/components/room/ImageList";
	import roomImageUpdate from "@/components/room/roomImageUpdate";
	import addRoomImage from '@/components/room/addRoomImage';
	import roomImageEvent from "@/components/room/roomImageEvent";
	export default {
		name: "roomInformation",
		data() {
			return {
				roomList: [],
				page_now: undefined,
				total: undefined,
				page_num: undefined,
				toChangeIndex: undefined,
				dialogFormVisible: false,
				showAddDialog:false,
				toChangeRow: null,
				addTemp: {
					item_id: "",
					url: "",
				},
				urlTemp: {},
				searchVal: ''
			};
		},
		components: {
			ImageList,
			roomImageEvent,
			roomImageUpdate,
			addRoomImage
		},
		methods: {
			addUser: function() {
				this.showAddDialog = true;
				this.urlTemp = { ...this.urlTemp
				};
			},

			change: function(index) {
				console.log(index,45634);
				this.toChangeRow = this.roomList[index];
			},
			refresh: async function() {
				let data = await this._axios
					.get("/ycw/rooms/getImage")
					.then(data => data.data.data);
					console.log(data)
				this.roomList = data;
			}
		},
		mounted: async function() {
			this.refresh();
		}
	};
</script>

<style lang="scss" scoped>
	.pagination {
		margin-top: 10px;
	}
</style>
